<template>
    <div>
    <!--  v-model.numbe 转成数字类型 -->
        <input type="text" v-model.number="res"/>
        <p>{{ res }}</p> 
    </div>
</template>

<script setup>
import { watchEffect,ref ,watch} from  'vue'
/**
 *  watchEffect 侦听数据变化,用来简化watch的使用
 *      watchEffect会自动收集依赖，当依赖的数据发生变化时，会自动执行回调函数
 *      适用于简单场景，不适用于复杂场景
 * 
 * 
 */

// //定义一个响应式数据
// const money = ref(100)
// //定义一个函数
// watchEffect(() => {
//     //这里面可以写一些逻辑代码
//     //当money发生变化时，会自动执行回调函数
//     const res = money.value + 2
//     console.log('money变化了',res)
// })


const a = ref(1)
const b = ref(99)
watchEffect(() => {    //只要a,b发生变化，就会执行回调函数
    const res = a.value + b.value
    console.log('watchEffect:a+b',res)
})

//如果知识一个变化调用就用watch
watch(a, () => {    //只要a发生变化，就会执行回调函数  注意这里有多个值就用数组[a,b]
    const sum = a.value + b.value;
    console.log('watch:a+b',sum)
})

//设置一个定时器，三秒后改变a的值
setTimeout(() => {
    a.value ++
}, 3000)

</script>
<style >
    
</style>